const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

// PWA：渐进式网络开发应用程序（离线可访问）
// workbox --> workbox-webpack-plugin

// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
	MiniCssExtractPlugin.loader,
	'css-loader',
	{
		loader: 'postcss-loader',
		options: {
			ident: 'postcss',
			plugins: () => [require('postcss-preset-env')]
		}
	}
];

module.exports = {
	entry: './src/js/index.js',
	output: {
		filename: 'js/built.[contenthash:10].js',
		path: resolve(__dirname, 'build')
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				enfore: 'pre',
				loader: 'eslint-loader',
				options: {
					fix: true
				}
			},
			{
				oneOf: [
					{
						test: /\.css$/,
						use: [...commonCssLoader]
					},
					{
						test: /\.less$/,
						use: [...commonCssLoader, 'less-loader']
					},
					{
						test: /\.js$/,
						exclude: /node_modules/,
						loader: 'babel-loader',
						options: {
							presets: [
								[
									'@babel/preset-env',
									{
										useBuiltIns: 'usage',
										corejs: { version: 3 },
										targets: {
											chrome: '60',
											firefox: '50'
										}
									}
								]
							]
						}
					},
					{
						test: /\.(jpg|png|gif)$/,
						loader: 'url-loader',
						options: {
							limit: 8*1024,
							name: '[hash:10].[ext]',
							outputPath: 'imgs',
							esModule: false
						}
					},
					{
						test: /\.html$/,
						loader: 'html-loader'
					},
					{
						exclude: /\.(js|css|less|html|png|jpg|gif)$/,
						loader: 'file-loader',
						options: {
							outputPath: 'media'
						}
					}
				]
			}
		]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: 'css/built.[contenthash:10].css'
		}),
		new OptimizeCssAssetsWebpackPlugin(),
		new HtmlWebpackPlugin({
			template: './src/index.html',
			minify: {
				collapseWhitespace: true,
				removeComments: true
			}
		}),
		new WorkboxWebpackPlugin.GenerateSW({
			// 1. 帮助serviceworker快速启动
			// 2. 删除旧的serviceworker
			// 生成一个serviceworker配置文件
			clientsClaim: true,
			skipWaiting: true
		})
	],
	mode: 'production',
	devtool: 'source-map'
}





